<template>
  <div class="message-attachment">
    <!-- 图片类型 - 特殊布局 -->
    <div v-if="attachment.type === 'image'" class="attachment-image">
      <img
        :src="attachment.url"
        :alt="attachment.name"
        class="image-preview"
        @click="previewImage"
        @error="onImageError"
      />
      <div class="image-overlay" @click="previewImage">
        <span class="image-name">{{ attachment.name }}</span>
      </div>
      <button
        v-if="showDelete"
        class="delete-btn image-delete"
        @click="deleteAttachment"
        title="删除附件"
      >
        <CloseOutlined />
      </button>
    </div>

    <!-- 视频类型 - 特殊布局 -->
    <div v-else-if="attachment.type === 'video'" class="attachment-video">
      <video
        :src="attachment.url"
        :poster="attachment.thumbnail"
        controls
        class="video-player"
      ></video>
      <div class="video-info">
        <span class="video-name">{{ attachment.name }}</span>
        <span class="video-size">{{ formatFileSize(attachment.size) }}</span>
        <button
          v-if="showDelete"
          class="delete-btn video-delete"
          @click="deleteAttachment"
          title="删除附件"
        >
          <CloseOutlined />
        </button>
      </div>
    </div>

    <!-- 通用卡片布局 - 文件、音频、链接、未知类型 -->
    <div v-else class="attachment-card">
      <!-- 左侧图标 -->
      <div class="attachment-icon">
        <FileIcon v-if="attachment.type === 'file'" />
        <AudioIcon v-else-if="attachment.type === 'audio'" />
        <LinkIcon v-else-if="attachment.type === 'link'" />
        <QuestionIcon v-else-if="attachment.type === 'question'" />
        <UnknownIcon v-else />
      </div>

      <!-- 中间信息区域 -->
      <div class="attachment-info">
        <!-- 标题行 -->
        <div class="attachment-title">
          <a
            v-if="attachment.type === 'link'"
            :href="attachment.url"
            target="_blank"
            class="link-title"
          >
            {{ attachment.title || attachment.name || attachment.url }}
          </a>
          <span v-else class="file-name">{{ attachment.name }}</span>
        </div>

        <!-- 副标题行 -->
        <div class="attachment-subtitle">
          <span v-if="attachment.type === 'file'">{{ formatFileSize(attachment.size) }}</span>
          <span v-else-if="attachment.type === 'audio'">{{
            formatDuration(attachment.duration)
          }}</span>
          <span v-else>{{ attachment.description ?? '未知文件类型' }}</span>
        </div>

        <!-- 音频播放器 -->
        <audio
          v-if="attachment.type === 'audio'"
          :src="attachment.url"
          controls
          class="audio-player"
        ></audio>
      </div>

      <!-- 右侧操作按钮 -->
      <div class="attachment-actions">
        <button
          v-if="attachment.type === 'file'"
          class="action-btn download-btn"
          @click="downloadFile"
          title="下载文件"
        >
          <DownloadIcon />
        </button>
        <button
          v-if="showDelete"
          class="action-btn delete-btn"
          @click="deleteAttachment"
          title="删除附件"
        >
          <CloseOutlined />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MessageAttachment } from '@/interface/chat';
import { CloseOutlined } from '@ant-design/icons-vue';
// 导入图标
import {
  AudioIcon,
  DownloadIcon,
  FileIcon,
  LinkIcon,
  QuestionIcon,
  UnknownIcon,
} from '@/icons/chat';

const props = defineProps<{
  attachment: MessageAttachment;
  showDelete?: boolean; // 是否显示删除按钮
}>();

const emit = defineEmits<{
  delete: [attachmentId: number];
}>();

// 格式化文件大小
const formatFileSize = (bytes?: number): string => {
  if (!bytes) return '';

  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  return Math.round((bytes / Math.pow(1024, i)) * 100) / 100 + ' ' + sizes[i];
};

// 格式化时长
const formatDuration = (seconds?: number): string => {
  if (!seconds) return '';

  const mins = Math.floor(seconds / 60);
  const secs = Math.floor(seconds % 60);
  return `${mins}:${secs.toString().padStart(2, '0')}`;
};

// 下载文件
const downloadFile = () => {
  const link = document.createElement('a');
  link.href = props.attachment.url || '';
  link.download = props.attachment.name || 'download';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 预览图片
const previewImage = () => {
  // 这里可以触发图片预览模态框
  window.open(props.attachment.url, '_blank');
};

// 图片加载错误处理
const onImageError = (event: Event) => {
  const img = event.target as HTMLImageElement;
  img.src = '/placeholder-image.png'; // 替换为占位图
};

// 删除附件
const deleteAttachment = () => {
  emit('delete', Number(props.attachment.id));
};
</script>

<style scoped lang="less">
.message-attachment {
  max-width: 280px;
  min-width: 200px;

  // 通用卡片布局样式
  .attachment-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    transition: all 0.2s ease;

    &:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }

    .attachment-icon {
      font-size: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: #667eea;
      color: white;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .attachment-info {
      flex: 1;
      min-width: 0;
      max-width: 180px;

      .attachment-title {
        margin-bottom: 4px;

        .file-name {
          display: block;
          font-weight: 500;
          color: #1e293b;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .link-title {
          display: block;
          color: #667eea;
          text-decoration: none;
          font-weight: 500;
          font-size: 14px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .attachment-subtitle {
        font-size: 12px;
        color: #64748b;

        // 默认单行显示（文件大小、音频时长等）
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;

        // 链接描述支持双行显示
        // &.link-description {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
        line-height: 1.4;
        // }
      }

      .audio-player {
        width: 100%;
        height: 32px;
        margin-top: 8px;
      }
    }

    .attachment-actions {
      display: flex;
      align-items: flex-start;
      gap: 4px;
      flex-shrink: 0;
    }

    .action-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;

      &.download-btn {
        color: #667eea;

        &:hover {
          background: #e2e8f0;
          color: #5a67d8;
        }
      }

      &.delete-btn {
        color: #ef4444;

        &:hover {
          background: rgba(239, 68, 68, 0.1);
          color: #dc2626;
        }
      }
    }
  }

  // 图片附件样式
  .attachment-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;

    .image-preview {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      display: block;
    }

    .image-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
      padding: 12px;
      opacity: 0;
      transition: opacity 0.2s ease;

      .image-name {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
    }

    &:hover .image-overlay {
      opacity: 1;
    }

    .image-delete {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      opacity: 0;
      transition: all 0.2s ease;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background: rgba(239, 68, 68, 0.9);
        color: white;
      }
    }

    &:hover .image-delete {
      opacity: 1;
    }
  }

  // 视频附件样式
  .attachment-video {
    border-radius: 15px;
    overflow: hidden;

    .video-player {
      width: 100%;
      max-height: 200px;
    }

    .video-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: #f8fafc;
      border-top: 1px solid #e2e8f0;
      max-width: 100%;

      .video-name {
        font-size: 12px;
        color: #1e293b;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        max-width: 180px;
      }

      .video-size {
        font-size: 11px;
        color: #64748b;
        margin-left: 8px;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .video-delete {
        margin-left: 8px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ef4444;

        &:hover {
          background: rgba(239, 68, 68, 0.1);
          color: #dc2626;
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .message-attachment {
    max-width: 240px;
    min-width: 180px;

    .attachment-card {
      padding: 10px;
      gap: 10px;

      .attachment-info {
        max-width: 140px;
      }
    }

    .attachment-image .image-preview {
      max-height: 150px;
    }

    .attachment-video .video-player {
      max-height: 150px;
    }
  }
}
</style>
